<template>
  <div class="main">
    <div class="form_content">
      <NScrollbar>
        <div class="content">
          <NSpace style="gap: 0 50px; padding: 0 25px">
            <NForm
                ref="formRef"
                :model="formValue"
                :rules="rules"
                label-placement="left"
                :label-width="115"
                label-align="right"
                require-mark-placement="left"
              >
                <NSpace>
                  <NFormItem
                    label="专家姓名:"
                    path="userName"
                  >
                    <NInput
                      v-model:value="formValue.userName"
                      placeholder="输入专家姓名"
                      style="width: 250px"
                    />
                  </NFormItem>
                  <NFormItem
                    label="性别:"
                    path="sex"
                  >
                    <NSelect
                      :options="listSexOption"
                      v-model:value="formValue.sex"
                      placeholder="请选择性别"
                      clearable
                      style="width: 250px"
                    />
                  </NFormItem>
                </NSpace>
                <NSpace>
                  <NFormItem
                    label="职称:"
                    path="titleName"
                  >
                    <NInput
                      v-model:value="formValue.titleName"
                      placeholder="请输入职称"
                      clearable
                      style="width: 250px"
                    />
                  </NFormItem>
                  <NFormItem
                    label="供职单位:"
                    path="jobUnit"
                  >
                    <NInput
                      v-model:value="formValue.jobUnit"
                      placeholder="输入供职单位"
                      style="width: 250px"
                    />
                  </NFormItem>
                </NSpace>
                <NSpace>
                  <NFormItem
                    label="专业:"
                    path="major"
                  >
                    <NInput
                      v-model:value="formValue.major"
                      placeholder="输入专业"
                      style="width: 250px"
                    />
                  </NFormItem>
                  <NFormItem
                    label="称号:"
                    path="designation"
                  >
                    <NInput
                      v-model:value="formValue.designation"
                      placeholder="输入称号"
                      style="width: 250px"
                    />
                  </NFormItem>
                 
                </NSpace>
                <NSpace>
                  <NFormItem
                    label="身份证号:"
                    path="idNumber"
                  >
                    <NInput
                      v-model:value="formValue.idNumber"
                      placeholder="输入身份证号"
                      style="width: 250px"
                    />
                  </NFormItem>
                  <NFormItem
                    label="联系方式:"
                    path="concatPhone"
                  >
                    <NInput
                      v-model:value="formValue.concatPhone"
                      placeholder="输入联系方式"
                      style="width: 250px"
                    />
                  </NFormItem>
                </NSpace>
              
                <NSpace>
                  <NFormItem
                    label="银行:"
                    path="bank"
                  >
                    <NInput
                      v-model:value="formValue.bank"
                      placeholder="输入银行"
                      style="width: 250px"
                    />
                  </NFormItem>
                  <NFormItem
                    label="银行卡号:"
                    path="bankNumber"
                  >
                    <NInput
                      v-model:value="formValue.bankNumber"
                      placeholder="输入银行卡号"
                      style="width: 250px"
                    />
                  </NFormItem>
                </NSpace>
                <NSpace>
                  <NFormItem
                    label="备注:"
                    path="notes"
                  >
                    <NInput
                      v-model:value="formValue.notes"
                      placeholder="输入备注"
                      style="width: 250px"
                      type="textarea"
                    />
                  </NFormItem>
                  <NFormItem
                    label="附件:"
                    path="fileIds"
                  >
                    <FUploader
                      :fileList="fileList"
                      @update:fileList="handleUploadList"
                      style="width: 250px"
                    />
                  </NFormItem>
                </NSpace>
              </NForm>
          </NSpace>
        </div>
      </NScrollbar>
    </div>
  </div>
  <FixedAction>
    <NSpace justify="center">
      <NButton
        style="width: 78px"
        ghost
        @click="goBack"
      >
        取消
      </NButton>
      <NButton
        type="primary"
        style="width: 78px"
        @click="confirm"
        :disabled="loading"
        :loading="loading"
      >
        保存
      </NButton>
    </NSpace>
  </FixedAction>
</template>

<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue'
import {
  NSpace,
  NForm,
  NInput,
  NFormItem,
  NButton,
  NScrollbar,
  NSelect,
  useMessage
} from 'naive-ui'
import type { FormInst } from 'naive-ui'
import router from '@/router'
import { useTagStore } from '@/stores/layout'
import FixedAction from '@/components/FixedAction.vue'
import { sendRequest } from '@/utils/api'
// import VUpload from '@/views/OA/Common/Upload.vue'
import type { HttpResponse } from '@/utils/http'
import FUploader from '@/views/Collection/Collect/Batch/components/FUploader.vue'

const tags = useTagStore().tags
const message = useMessage()
const loading = ref(false)
const formRef = ref<FormInst | null>(null)
const listSexOption = ref([
  { label: '男', value: '1' },
  { label: '女', value: '2' }
])
const formValue = reactive({
  userName: null,
  sex: null,
  titleName: null,
  concatPhone: null,
  bank: null,
  bankNumber: null,
  idNumber: null,
  major: null,
  designation: null,
  jobUnit: null,
  fileIds: null,
  notes: null
})
const fileList: any = ref([])
const rules = {
  userName: {
    required: true,
    message: '请输入专家姓名',
    trigger: 'blur'
  },
  sex: {
    required: true,
    type:'any',
    message: '请选择性别',
    trigger: ['change', 'blur']
  },
  titleName: {
    required: true,
    message: '请输入职称',
    trigger: ['change', 'blur']
  },
  concatPhone: {
    required: true,
    message: '请输入联系方式',
    trigger: 'blur'
  }
}
// 附件
const handleUploadList = (v: any) => {
  formValue.fileIds = v.map((e: any) => e.file?.remoteId).join(',')
  fileList.value = v
}
// 返回
const goBack = () => {
  const index = tags.findIndex((item: any) => item.path === router.currentRoute.value.fullPath)
  
    tags.splice(index, 1)
  if (tags.length == 0) {
    router.push({ path: '/OA/Workbench/UserDesktop' })
  } else history.back()
}
//修改
const confirm = () => {
  formRef.value?.validate(async (err: any) => {
    if (err) return
    loading.value = true
    const [error, res] = await sendRequest<HttpResponse>({
      module: 'baseExpert',
      api: 'save',
      override: {
        data: {
          ...formValue
        }
      }
    })
    loading.value = false
    if (error) return message.error(error.message)
    message.success(res.msg)
    goBack()
  })
}
</script>

<style scoped lang="scss">
@mixin CommonFont {
  font-size: 16rem;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.85);
}

.commonWidth {
  width: 360rem;
}

.main {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .topTitle {
    width: 100%;
    height: 64rem;
    border-bottom: 1px solid #fff;
    padding: 20rem;
    margin-bottom: 20rem;
    @include CommonFont;
  }

  .form_content {
    width: 100%;
    height: 100%;
    padding: 20rem 20rem 0;

    .content {
      display: flex;
      align-items: center;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding: 18rem 33rem 120rem;
      overflow-y: scroll;
      background-color: #ebeceb;

      .scope {
        width: 360rem;
        height: 130rem;
        background: #e1e1e1;
        margin-bottom: 25rem;
      }
    }
  }
}

.content::-webkit-scrollbar {
  display: none;
}

:deep(.n-spin-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-container) {
  width: 100%;
  height: 100%;
}

:deep(.n-scrollbar-content) {
  width: 100%;
  height: 100%;
}

:deep(.n-spin-content) {
  width: 100%;
  height: 100%;
}
</style>
